<template>
	<view>
		<view class="table" v-if="tableData.userlist&&tableData.userlist.length>0">
			<view class="group">
				<view class="group-item">
					<view class="item-top-box">
						<view class="m" style="width:100%;text-align: left;">
							<text class="content">{{tableData.team_name }}</text>
							<text class="label" style="color:#999;font-size: 12px;">({{tableData.userNumber }})</text>
						</view>
						<view class="m">
							<text class="label ">
								平均总分:
							</text>
							<text class="content">{{tableData.average_sum }}</text>
						</view>
						<view class="m" style="margin: 0;font-weight: normal;font-size: 14px;">
							<text class="label">
								团队业绩:
							</text>
							<text class="content">{{tableData.profit_sum }}</text>
						</view>
						<view class="m">
							<text class="label wm">
								师傅平均分:
							</text>
							<text class="content">{{tableData.average_sum_trainee1 }}</text>
						</view>
						<view class="m">
							<text class="label wm">
								学徒平均分:
							</text>
							<text class="content">{{tableData.average_sum_trainee2 }}</text>
						</view>

					</view>
				</view>
			</view>
			<!-- 表头 -->
			<view class="tr" style="    border-bottom: 4px solid #cccccc;">
				<view class="fiexdO">
					<view class="td ">
						姓名
					</view>
				</view>
				<scroll-view class="scroll-td" :scroll-left="scrollLeft" scroll-x="true" @scroll="getScroll">
					<view class="scroll-tr tr">
						<view class="td" v-for="(item,index) in columns" :key="index">
							{{item.text}}
						</view>
					</view>
				</scroll-view>
				<view class="fiexdT">
					<view class="td ">
						总积分
					</view>
				</view>
			</view>
			<!-- 表头 -->
			<view style="display: flex;">
				<view class="fiexdO">
					<view class="tr" v-for="(item,index) in tableData.userlist" :key="index">
						<view class="td ">
							{{item.username}}
						</view>
					</view>
				</view>
				<scroll-view class="scroll-td" :scroll-left="scrollLeft" scroll-x="true" @scroll="getScroll">
					<view class="scroll-tr tr" v-for="(item,index) in tableData.userlist" :key="index">
						<view class="td" v-for="(column,index) in columns" :key="index">
							{{item[column.name]}}
						</view>
					</view>
				</scroll-view>
				<view class="fiexdT">
					<view class="tr" v-for="(item,index) in tableData.userlist" :key="index">
						<view class="td ">
							{{item.Integral}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
	</view>
</template>

<script>
	export default {
		props: {

			columns: {
				type: Array,
				default: () => []
			},
			tableData: {},
		},
		data() {
			return {
				scrollLeft: 0,
			}
		},
		methods: {
			getScroll({
				detail: {
					scrollLeft
				}
			}) {
				this.scrollLeft = scrollLeft
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table {
		font-size: 12px;
		background: #f8f8f8;

		.scroll-td {
			width: calc(100% - 240rpx)
		}

		.tr {
			display: flex;
		}

		.td {
			width: 120rpx;
			text-align: center;
			line-height: 80rpx;
			box-sizing: border-box;
			cursor: pointer;

		}

		.fiexdO {
			background: #f8f8f8;
			border-right: 1px solid #a8a8a8;
			font-size: 14px;
		}

		.scroll-tr {
			width: calc(120rpx * 8)
		}

		.fiexdT {
			font-size: 14px;
			background: #f8f8f8;

			border-left: 1px solid #a8a8a8;
		}
	}

	::v-deep.uni-scroll-view-content {
		overflow: auto hidden;
	}

	.group {
		padding: 0 35rpx;
		background-color: #fff;

		&-item {
			padding: 20rpx 0;

			.item-top-box {
				display: flex;
				flex-wrap: wrap;
				font-size: 14px;

				.m {
					width: 50%;
					margin-bottom: 25rpx;

					&:nth-child(2n+1) {
						text-align: right;
					}

					.label {
						color: #999;
						font-weight: 600;
					}

					.sp {
						background-color: #fdbf29;
						color: #fff;
						display: inline;
						padding: 10rpx 16rpx;
						border-radius: 6rpx;
					}

					.content {
						margin-left: 0rpx;
						font-weight: 600;
						color: #333;
						font-size: 14px;
					}
				}
			}
		}
	}
</style>